<script setup>
import {onMounted, ref, nextTick, h, reactive} from 'vue';
import TheIcon from '@/components/icon/TheIcon.vue'
import api from '@/api'
import {NButton, NFlex, NForm, NFormItem, NInput, NSelect, NTabPane, NTabs, NTag, useMessage, NH6, NAvatar, NCard, NGrid, NGi, NNumberAnimation} from "naive-ui";
import {useCRUD} from "@/composables";
import {renderIcon} from "@/utils";


const base_path = import.meta.env.VITE_BASE
const message = useMessage()

const {
  modalVisible,
  modalAction,
  modalTitle,
  modalLoading,
  handleAdd,
  handleDelete,
  handleEdit,
  handleSave,
  modalForm,
  modalFormRef,
} = useCRUD({
  name: '控制台',
  initForm: {},
  doCreate: api.createAppointment,
  doDelete: api.deleteAppointment,
  doUpdate: api.updateAppointment,
  refresh: () => on_ref(),
})
const data = reactive({
  card_loading: false,
  no_arrive:[],
  type01:[],
  type10:[],
  type20:[],
  type50:[],
  show_sop:false,
  paidui:false,
  select_arriveid:0,
  tab:0,
  dep_users:[],
  select_dep_uid:0,
  dep_tab:0,
  change_arrive:1,
  my_arrive:[],
  remark:"",
  select_dep_loading:false,
  select_uid:0,
  select_uname:"",
  select_avatar:"",
  leave_list:[],
  // 添加统计数据
  stats: {
    totalArrivals: 0,
    firstVisit: 0,
    revisit: 0,
    reconsume: 0,
    todayRevenue: 0
  }
});

onMounted(() => {
  on_ref()
});

function on_ref() {
  get_no_arrive()
  get_arrive()
  get_peican()
  get_mianzhen()
  get_caozuo()
  get_table_data()
}


function get_no_arrive() {
  api.get_no_arrive({
    type: 0,
    keyword: data.keyword
  }).then((res) => {
    data.no_arrive = res.data
  })
  api.get_my_arrive({
    type: 0,
    keyword: data.keyword
  }).then((res) => {
    data.my_arrive = res.data.items
  })
  api.get_arrived({
    type: [99],
  }).then((res) => {
    data.leave_list = res.data
  })
}

function on_arrive(item) {
  api.arriveAppointment({
    id: item.id,
  }).then((res) => {
    message.success('签到成功')
    on_ref()
  })
}

function cancel_arrive(item) {
  api.deleteAppointment({
    id: item.id,
  }).then((res) => {
    message.success('取消成功')
    on_ref()
  })
}

function cancel_arrive1(item) {
  console.log(item)
  api.deleteAppointment({
    id: item.appoint_id,
  }).then((res) => {
    message.success('取消成功')
    on_ref()
  })
}

function get_table_data() {
  api.get_table_data().then((res) => {
    data.stats = res.data
  })
}

function get_arrive() {
  api.get_arrived({
    type: [0,1],
  }).then((res) => {
    data.type01 = res.data
  })
}

function get_peican() {
  api.get_arrived({
    type: [10,12],
  }).then((res) => {
    data.type10 = res.data
  })
}

function get_mianzhen() {
  api.get_arrived({
    type: [20],
  }).then((res) => {
    data.type20 = res.data
  })
}

function get_caozuo() {
  api.get_arrived({
    type: [50,30],
  }).then((res) => {
    data.type50 = res.data
  })
}

function on_operateDoing(item) {
  api.operateDoing({
    id: item.id,
  }).then((res) => {
    message.success('开始接待客户')
    on_ref()
  })
}

function show_sop(item){
  data.show_sop = true
  data.select_arriveid = item.id
  data.select_uid = item.user_id
  data.select_uname = item.name
  data.select_avatar =item.avatar
  on_get_dep(data.dep_tab)
}
function on_get_dep(value){
  data.select_dep_loading = true
  if(value){
    data.dep_tab = value
  }

  api.get_depusers({
    id: data.select_arriveid,
    tab:data.dep_tab
  }).then((res) => {
    data.dep_users = res.data.items
    data.select_dep_loading = false
    return true;
  })
}

function add_paidui(){
  api.select_depusers({
    id: data.select_arriveid,
    user_id:data.select_dep_uid,
    remark:data.remark
  }).then((res) => {
     message.success('分配成功')
     on_get_dep()
     on_ref()
  })
}

function show_paidui(item){
  data.paidui=item
}
function select_dep_uid(item){
  data.select_dep_uid = item.id
}

function cancel_paidui(item){
  api.cancel_depusers({
    id: item.id
  }).then((res) => {
     message.success('取消成功')
     on_get_dep()
     on_ref()
  })
}

function on_leave(){
  api.on_leave({
    user_id:data.select_uid,
    remark:data.remark
  }).then((res) => {
     message.success('离店成功')
     data.show_sop = false
     on_ref()
  })
}


</script>

<template>
  <AppPage :show-footer="false">
    <n-card size="small" :bordered="false" style="min-height: 200px;">
      <n-tabs type="line" animated size="large">
         <n-tab-pane name="1" tab="接待中">
           <n-scrollbar x-scrollable>
        <div style="white-space: nowrap;width: 100%;display: flex;padding-bottom: 20px">
          <n-card embedded v-for="item in data.my_arrive" class="customer_card" hover:card-shadow
                   size="small" :segmented="{content: true,footer: 'soft',}" style="width: 250px;margin-right:10px;">
            <template #header>
                <div style="display: flex; align-items: center;" >
                  <div style="flex-shrink: 0;">
                    <NAvatar :src="item.avatar"  style="width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; object-fit: cover;" />
                  </div>
                  <div style="line-height: 15px;font-size: 14px; flex: 1; min-width: 0; overflow: hidden;">
                    <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{item.name}}</div>
                    <div style="font-size: 12px;font-weight: normal;margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                      No.&nbsp;{{item.card_number}}
                    </div>
                  </div>
                </div>
              </template>
            <template #header-extra>
              <NTag type="primary">{{ item.user_level_name }}</NTag>
            </template>
            <template #footer>
              <span color="#ef504e"></span>
              <n-flex justify="space-between" size="large">
                <div>接待: <span>{{item.butler}}</span></div>
                <div>
                  <NButton type="info" size="tiny" @click="show_sop(item)">{{item.status_format}}</NButton>&nbsp;
<!--                  <n-popconfirm  @positive-click="cancel_arrive1(item)">-->
<!--                    <template #trigger>-->
<!--                      <NButton type="success" size="tiny" >取消</NButton>-->
<!--                    </template>-->
<!--                    确定要取消吗？-->
<!--                  </n-popconfirm>-->
                </div>
              </n-flex>
<!--              <n-flex justify="space-between" size="large">-->
<!--                <n-alert type="success" style="width: 100%;margin-top: 10px">-->
<!--                  {{item.ac_remark}}-->
<!--                </n-alert>-->
<!--              </n-flex>-->
            </template>
          </n-card>
        </div>
      </n-scrollbar>
         </n-tab-pane>
         <n-tab-pane name="2" tab="未到店">
           <n-scrollbar x-scrollable>
        <div style="white-space: nowrap;width: 100%;display: flex;padding-bottom: 20px">
          <n-card embedded v-for="item in data.no_arrive" class="customer_card" hover:card-shadow
                  @click="select_customer(item)" size="small" :segmented="{content: true,footer: 'soft',}" style="width: 250px;margin-right:10px;">
            <template #header>
                <div style="display: flex; align-items: center;" >
                  <NAvatar :src="item.avatar"  style="width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; object-fit: cover; flex-shrink: 0;" />
                  <div style="line-height: 15px;font-size: 14px; flex: 1; min-width: 0; overflow: hidden;">
                    <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{item.username}}</div>
                    <div style="font-size: 12px;font-weight: normal;margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                      No.&nbsp;{{item.card_number}}
                    </div>
                  </div>
                </div>
              </template>
            <template #header-extra>
              <NTag type="primary">{{ item.user_level_name }}</NTag>
            </template>
            <template #footer>
              <span color="#ef504e"></span>
              <n-flex justify="space-between" size="large">
                <div>预计到店: <span>{{item.appoint_time2}}</span></div>
                <div>
                  <n-popconfirm @positive-click="on_arrive(item)">
                    <template #trigger>
                      <NButton type="info" size="tiny" >签到</NButton>
                    </template>
                    确定要签到吗？
                  </n-popconfirm>&nbsp;
                  <n-popconfirm @positive-click="cancel_arrive(item)">
                    <template #trigger>
                      <NButton type="success" size="tiny" >取消</NButton>
                    </template>
                    确定取消吗？
                  </n-popconfirm>
                </div>

              </n-flex>
            </template>
          </n-card>
        </div>
      </n-scrollbar>
         </n-tab-pane>
         <n-tab-pane name="3" tab="已离院">
           <n-scrollbar x-scrollable>
            <div style="white-space: nowrap;width: 100%;display: flex;padding-bottom: 20px">
              <n-card embedded v-for="item in data.leave_list" class="customer_card" hover:card-shadow
                      @click="select_customer(item)" size="small" :segmented="{content: true,footer: 'soft',}" style="width: 250px;margin-right:10px;">
                <template #header>
                    <div style="display: flex; align-items: center;" >
                      <NAvatar :src="item.avatar"  style="width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; object-fit: cover; flex-shrink: 0;" />
                      <div style="line-height: 15px;font-size: 14px; flex: 1; min-width: 0; overflow: hidden;">
                        <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{item.username}}</div>
                        <div style="font-size: 12px;font-weight: normal;margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                          No.&nbsp;{{item.card_number}}
                        </div>
                      </div>
                    </div>
                  </template>
                <template #header-extra>
                  <NTag type="primary">{{ item.user_level_name }}</NTag>
                </template>
                <template #footer>
                  <span color="#ef504e"></span>
                  <n-flex justify="space-between" size="large">
                    <div>离院时间: <span>{{item.leave_time}}</span></div>
                  </n-flex>
                </template>
              </n-card>
            </div>
          </n-scrollbar>
         </n-tab-pane>
       </n-tabs>
    </n-card>

    <!-- 数据看板 -->
    <n-grid x-gap="12" :cols="4" style="margin-top:20px;">
      <n-gi>
        <n-card size="small" :bordered="false" class="stat-card stat-card-blue" hoverable>
          <n-flex align="center" justify="space-between">
            <div>
              <div class="stat-label">到院人数</div>
              <div class="stat-value">
                <n-number-animation :from="0" :to="data.stats.totalArrivals" :precision="0" />
              </div>
              <!-- <div class="stat-desc">
                <TheIcon icon="material-symbols:trending-up" :size="14" color="#18a058" />
                <span class="trend-up">较昨日 +12.5%</span>
              </div> -->
            </div>
            <div class="stat-icon stat-icon-blue">
              <TheIcon icon="mdi:account-group" :size="48" />
            </div>
          </n-flex>
        </n-card>
      </n-gi>
      <n-gi>
        <n-card size="small" :bordered="false" class="stat-card stat-card-green" hoverable>
          <n-flex align="center" justify="space-between">
            <div>
              <div class="stat-label">初诊人数</div>
              <div class="stat-value">
                <n-number-animation :from="0" :to="data.stats.firstVisit" :precision="0" />
              </div>
              <!-- <div class="stat-desc">
                <TheIcon icon="material-symbols:trending-up" :size="14" color="#18a058" />
                <span class="trend-up">较昨日 +8.3%</span>
              </div> -->
            </div>
            <div class="stat-icon stat-icon-green">
              <TheIcon icon="mdi:account-plus" :size="48" />
            </div>
          </n-flex>
        </n-card>
      </n-gi>
      <n-gi>
        <n-card size="small" :bordered="false" class="stat-card stat-card-orange" hoverable>
          <n-flex align="center" justify="space-between">
            <div>
              <div class="stat-label">复诊人数</div>
              <div class="stat-value">
                <n-number-animation :from="0" :to="data.stats.revisit" :precision="0" />
              </div>
              <!-- <div class="stat-desc">
                <TheIcon icon="material-symbols:trending-up" :size="14" color="#18a058" />
                <span class="trend-up">较昨日 +15.2%</span>
              </div> -->
            </div>
            <div class="stat-icon stat-icon-orange">
              <TheIcon icon="mdi:account-search" :size="48" />
            </div>
          </n-flex>
        </n-card>
      </n-gi>
      <n-gi>
        <n-card size="small" :bordered="false" class="stat-card stat-card-purple" hoverable>
          <n-flex align="center" justify="space-between">
            <div>
              <div class="stat-label">再消费人数</div>
              <div class="stat-value">
                <n-number-animation :from="0" :to="data.stats.reconsume" :precision="0" />
              </div>
              <!-- <div class="stat-desc">
                <TheIcon icon="material-symbols:trending-up" :size="14" color="#18a058" />
                <span class="trend-up">较昨日 +5.2%</span>
              </div> -->
            </div>
            <div class="stat-icon stat-icon-purple">
              <TheIcon icon="mdi:cart" :size="48" />
            </div>
          </n-flex>
        </n-card>
      </n-gi>

    </n-grid>
    <n-grid x-gap="12" :cols="4" style="margin-top:20px;">
      <n-gi>
        <n-card size="small" :bordered="false" class="stat-card stat-card-red" hoverable>
          <n-flex align="center" justify="space-between">
            <div>
              <div class="stat-label">今日营业额</div>
              <div class="stat-value">
                <n-number-animation :from="0" :to="data.stats.todayRevenue" :precision="0" />
              </div>
              <!-- <div class="stat-desc">
                <TheIcon icon="material-symbols:trending-up" :size="14" color="#18a058" />
                <span class="trend-up">较昨日 +18.5%</span>
              </div> -->
            </div>
            <div class="stat-icon stat-icon-red">
              <TheIcon icon="mdi:cash-multiple" :size="48" />
            </div>
          </n-flex>
        </n-card>
      </n-gi>
    </n-grid>


<!--    <n-float-button :right="10" :bottom="10" shape="square" @click="handleAdd" type="primary">-->
<!--      <component :is="renderIcon('material-symbols-light:add', { size: 25,color:'#fff' })"/>-->
<!--    </n-float-button>-->

    <n-modal v-model:show="data.show_sop" preset="dialog" title="" style="width: 600px;">
    <template #header>
      <div>{{data.select_uname}}进入接待流程分配</div>
    </template>

    <n-card size="small" embedded :bordered="false" :segmented="{content: true,footer: 'soft',}" >
       <n-tabs type="segment" animated :on-update:value="on_get_dep">
         <n-tab-pane name="0" tab="导医"></n-tab-pane>
         <n-tab-pane name="1" tab="健康顾问"></n-tab-pane>
<!--         <n-tab-pane name="2" tab="护士"></n-tab-pane>-->
         <n-tab-pane name="3" tab="护士"></n-tab-pane>
         <n-tab-pane name="2" tab="医生"></n-tab-pane>
       </n-tabs>
      <n-spin :show="data.select_dep_loading" style="--n-opacity-spinning:0.1;min-height: 200px">
      <n-card v-for="item in data.dep_users" size="small" :bordered="false" :segmented="{content: true,footer: 'soft',}" >
         <template #header>
            <div style="display: flex; align-items: center;">
              <NAvatar :src="item.avatar" style="width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; object-fit: cover; flex-shrink: 0;"/>
              <span style="flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{item.name}}</span>
            </div>
          </template>
        <template #header-extra>
           <NButton type="info" v-if="data.select_dep_uid===item.id" size="small">已选择</NButton>
          <NButton type="primary" size="small" v-else @click="select_dep_uid(item)">选择</NButton>
        </template>
        <div style="display: flex;justify-content: space-between" v-if="item.queue.length>0">
           <div style="display: flex">
             <div>排队人数({{item.queue.length}})</div>
             <NAvatar v-for="item2 in item.queue" :src="item2.avatar" style="width: 20px; height: 20px; margin-left: 10px; border-radius: 50%; object-fit: cover;"/>
           </div>
           <div>
             <NButton type="primary" size="tiny" @click="show_paidui(item)" secondary>展开</NButton>
           </div>
        </div>

        <n-collapse-transition :show="data.paidui===item">
          <div v-for="(item2,index) in item.queue" style="display: flex;justify-content: space-between;align-items:center;background: rgb(247 247 250);border-radius: 5px;margin-top: 10px;padding: 5px;" >
           <div style="display: flex;align-items:center; flex: 1; min-width: 0;">
             <div style="margin-right: 10px;font-size: 18px; flex-shrink: 0;">No.{{index+1}}</div>
             <NAvatar :src="item2.avatar" style="width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; object-fit: cover; flex-shrink: 0;"/>
             <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{item2.name}}</div>

           </div>
            <div>
              <n-popover trigger="hover">
                <template #trigger>
                  <n-button size="tiny" style="font-size: 12px;margin-right: 5px" type="primary">备注</n-button>
                </template>
                <span>{{item2.remark}}</span>
              </n-popover>
              <NButton type="error" size="tiny" dashed style="margin-right: 5px">{{item2.status_format}}</NButton>
               <n-popconfirm @positive-click="cancel_paidui(item2)"  v-if="item2.is_cancel">
                    <template #trigger>
                      <NButton type="info" size="tiny" >取消排队</NButton>
                    </template>
                    确定要取消排队吗？
                  </n-popconfirm>
            </div>
          </div>
        </n-collapse-transition>



      </n-card>
      </n-spin>
    </n-card>



    <template #action>
      <div style="display: flex;width: 100%">
      <n-input placeholder="分配备注" v-model:value="data.remark" style="width: 100%;margin-right: 10px"/>
        <n-button type="primary" size="large" @click="add_paidui"  style="margin-right: 10px">
        <TheIcon icon="material-symbols:add" :size="18" class="mr-5"/>
        分配
      </n-button>
        <n-popconfirm @positive-click="on_leave()">
                    <template #trigger>
                      <NButton type="info" size="large" >离院</NButton>
                    </template>
                    确定要离院吗？
                  </n-popconfirm>
      </div>
    </template>
  </n-modal>

  </AppPage>

</template>
<style scoped>
/* 数据看板样式 */
.stat-card {
  min-height: 120px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.1);
}

.stat-card:hover::before {
  width: 6px;
}

/* 蓝色主题 */
.stat-card-blue::before {
  background: linear-gradient(135deg, #2080f0 0%, #52a0ff 100%);
}

.stat-card-blue {
  border-color: rgba(32, 128, 240, 0.2);
}

.stat-card-blue .stat-icon-blue {
  background: linear-gradient(135deg, #e8f2ff 0%, #cce5ff 100%);
  border-radius: 12px;
  padding: 12px;
  color: #2080f0;
}

/* 绿色主题 */
.stat-card-green::before {
  background: linear-gradient(135deg, #18a058 0%, #52c41a 100%);
}

.stat-card-green {
  border-color: rgba(24, 160, 88, 0.2);
}

.stat-card-green .stat-icon-green {
  background: linear-gradient(135deg, #e8f8f0 0%, #cce8dd 100%);
  border-radius: 12px;
  padding: 12px;
  color: #18a058;
}

/* 橙色主题 */
.stat-card-orange::before {
  background: linear-gradient(135deg, #f0a020 0%, #ffb84d 100%);
}

.stat-card-orange {
  border-color: rgba(240, 160, 32, 0.2);
}

.stat-card-orange .stat-icon-orange {
  background: linear-gradient(135deg, #fff4e6 0%, #ffe6cc 100%);
  border-radius: 12px;
  padding: 12px;
  color: #f0a020;
}

/* 紫色主题 */
.stat-card-purple::before {
  background: linear-gradient(135deg, #722ed1 0%, #b37feb 100%);
}

.stat-card-purple {
  border-color: rgba(114, 46, 209, 0.2);
}

.stat-card-purple .stat-icon-purple {
  background: linear-gradient(135deg, #f3e8ff 0%, #e6d5ff 100%);
  border-radius: 12px;
  padding: 12px;
  color: #722ed1;
}

/* 红色主题 */
.stat-card-red::before {
  background: linear-gradient(135deg, #d03050 0%, #ff4d6a 100%);
}

.stat-card-red {
  border-color: rgba(208, 48, 80, 0.2);
}

.stat-card-red .stat-icon-red {
  background: linear-gradient(135deg, #ffebec 0%, #ffd6d9 100%);
  border-radius: 12px;
  padding: 12px;
  color: #d03050;
}

/* 统计标签 */
.stat-label {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 8px;
  font-weight: 500;
}

/* 统计数值 */
.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
  line-height: 1.2;
}

/* 统计描述 */
.stat-desc {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
}

.trend-up {
  color: #18a058;
  font-weight: 500;
}

.trend-down {
  color: #d03050;
  font-weight: 500;
}

/* 统计图标容器 */
.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stat-value {
    font-size: 28px;
  }
  
  .stat-icon {
    display: none;
  }
}
</style>